<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'测试背景'}){}
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="${ctxPath}/externaljs/pixijs/pixi.min.js"></script>
    <script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
    <script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
    <script src="${ctxPath}/externaljs/tweenmax/TweenMax.js"></script>
    <script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>
    <style>
        .marginTop{
            margin-top: 20px;
        }
        .big-size {
            zoom: 150%;
        }
        .deviceStatus {
            width: 900px;
            /*padding: 6px 6px;*/
            /*border: 1px solid #ccc;*/
            font-size: 16px;
            /*overflow: hidden;*/
            /*display: inline-block ;*/
        }
        .data-label {
            display: inline-block;
            padding: 3px 3px;
            background-color: #64e8fd;
            color: #1a1f28;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            width: 58px;
            margin-top: 23px;
        }

        .data-container {
            font-size: 18px;
            /*margin-left: 3px;*/
            border: none;
            outline: none;
            /*color: #4b7ca4;*/
            color: white;
            font-weight: bold;
            border-radius: 4px;
            width: 58px;
            padding: 8px 8px;
            margin-top: 4px;
            margin-right: 4px;
            background-color: transparent;

        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md6">
            <div class="layui-card" style="background-color: #232324 !important;">
                <div class="layui-card-body">
                    <div id="pixiDJ2">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md6">
            <div class="layui-card" style="height : 16vh">
                <div class="layui-card-header head-font">3#任务状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="nowStatus">当前状态</label>
                    <input class="data-container" type="text" id="nowStatus" value="运行中">

                    <label class="data-label" for="nowMode">当前模式</label>
                    <input class="data-container" type="text" id="nowMode" value="下线">

                    <label class="data-label" for="nowTask">当前任务</label>
                    <input class="data-container" type="text" id="nowTask" value="下线">


                    <label class="data-label" for="nowStep">当前步骤</label>
                    <input class="data-container" type="text" id="nowStep" value="吸板">


                    <label class="data-label" for="nowSteel">当前钢板</label>
                    <input class="data-container" type="text" id="nowSteel" value="Q3213">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md6">
            <div class="layui-card" style="height : 30vh">
                <div class="layui-card-header head-font">3#设备状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="data-input">天车上电</label>
                    <input class="data-container" type="text" id="data-input" value="是">


                    <label class="data-label" for="automaticModeLabel">运行模式</label>
                    <input class="data-container" type="text" id="automaticModeLabel" value="自动">


                    <label class="data-label" for="craneXLabel">大车位置</label>
                    <input class="data-container" type="text" id="craneXLabel" value="1000">


                    <label class="data-label" for="craneYLabel">小车位置</label>
                    <input class="data-container" type="text" id="craneYLabel" value="1000">


                    <label class="data-label" for="craneZLabel">起升高度</label>
                    <input class="data-container" type="text" id="craneZLabel" value="1000">

                    <label class="data-label" for="nowElectricStatus">运行状态</label>
                    <input class="data-container" type="text" id="nowElectricStatus" value="进行中">


                    <label class="data-label" for="nowElectricSteel">当前钢板</label>
                    <input class="data-container" type="text" id="nowElectricSteel" value="Q2345">

                    <label class="data-label" for="doorStatus">门禁状态</label>
                    <input class="data-container" type="text" id="doorStatus" value="闯入">

                    <label class="data-label" for="suckStatus">吸板状态</label>
                    <input class="data-container" type="text" id="suckStatus" value="吸板">

                    <label class="data-label" for="left2">信号预留</label>
                    <input class="data-container" type="text" id="left2" value="吸板">

                    <label class="data-label" for="left3">信号预留</label>
                    <input class="data-container" type="text" id="left3" value="吸板">

                    <label class="data-label" for="left4">信号预留</label>
                    <input class="data-container" type="text" id="left4" value="吸板">
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script>
    layui.config({
        base: CXL.ctxPath + '/externaljs/'
    }).extend({ //设定组件别名
        echarts: 'echarts/echarts',
        axios: 'axios/axios'
    });
    layui.use(['table', 'laydate', 'form', 'layer', 'element', 'echarts', 'axios'], function () {
        const oneAreaWidth=800;
        const oneAreaHeight=380;
        const stack2rollerSpace=130;

        const stackWidth=140;
        const stackHeight=240;
        const rollerWidth=100;
        const rollerHeight=320;

        const stack1LeftWidth=(oneAreaWidth-2*stackWidth-2*stack2rollerSpace-rollerWidth)/2;
        const stack1TopHeight=(oneAreaHeight-stackHeight)/2;
        const rollerTopHeight=(oneAreaHeight-rollerHeight)/2;
        const rollerLeftWidth=stack1LeftWidth+stackWidth+stack2rollerSpace;
        const stack2LeftWidth=rollerLeftWidth+rollerWidth+stack2rollerSpace;
        const stack2TopHeight=stack1TopHeight;

        const rectFrameColor=0x00FF00;
        const appDJ2 = new PIXI.Application({
            width: oneAreaWidth,
            height:oneAreaHeight,
            backgroundColor: 0x021e2e
        });

        document.getElementById("pixiDJ2").appendChild(appDJ2.view);

        initDraw();

        function initDraw(){
            drawDJ2Roller();
            drawDJ2Stack1();
            drawDJ2Stack2();


            /*drawBigCrane('0xbc4702',60,30,8,);
            drawSmallCrane('0xa233c6',60,20,'天车');
            TweenMax.to(craneContainer, 6, { x:400, y: craneContainer.y });
            TweenMax.to(smallCraneContainer, 6, { x:400, y:300});*/
        }


        function drawDJ2Stack1(){
            const stackframe = new PIXI.Graphics();
            stackframe.lineStyle(1.4,rectFrameColor,1,0);
            stackframe.drawRect(stack1LeftWidth,stack1TopHeight,stackWidth,stackHeight);
            appDJ2.stage.addChild(stackframe);

            const stackText = new PIXI.Text("DJ2垛位1", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            stackText.y=stack1TopHeight+10;
            stackText.x =stack1LeftWidth+stackWidth/2-stackText.width/2;
            appDJ2.stage.addChild(stackText);
        }

        function drawDJ2Roller(){
            const rollerframe = new PIXI.Graphics();
            rollerframe.lineStyle(1.4,rectFrameColor,1,0);
            rollerframe.drawRect(rollerLeftWidth,rollerTopHeight,rollerWidth,rollerHeight);
            appDJ2.stage.addChild(rollerframe);

            const rollerText = new PIXI.Text("DJ2辊道", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            rollerText.y=rollerTopHeight+10;
            rollerText.x =rollerLeftWidth+rollerWidth/2-rollerText.width/2;
            appDJ2.stage.addChild(rollerText);
        }

        function drawDJ2Stack2(){
            const stackframe = new PIXI.Graphics();
            stackframe.lineStyle(1.4,rectFrameColor,1,0);
            stackframe.drawRect(stack2LeftWidth,stack2TopHeight,stackWidth,stackHeight);
            appDJ2.stage.addChild(stackframe);

            const stackText = new PIXI.Text("DJ2垛位2", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            stackText.y=stack2TopHeight+10;
            stackText.x =stack2LeftWidth+stackWidth/2-stackText.width/2;
            appDJ2.stage.addChild(stackText);
        }


        connect();
        setTimeout(function () {
            //subscribeTaskStatus();
            //subscribePoolCellsHeight();
            //TODO plc待对接后开发
            //subscribePlcData();
        }, 2000);


        function subscribePoolCellsHeight() {
            // 设置订阅地址
            SUBSCRIBE = SUBSCRIBE_PREFIX + "/cellHeight/craneNoOne" ;
            // 输出订阅地址
            // alert("设置订阅地址为：" + SUBSCRIBE);
            // 执行订阅消息
            stompClient.subscribe(SUBSCRIBE, function (responseBody) {
                var receiveMessage = JSON.parse(responseBody.body);
                //console.log(receiveMessage[0]);
                receiveMessage.forEach((oneMessage) => {
                    drawPoolRectHeightText(oneMessage.jian,oneMessage.height);
                });
            });
        }


        function insertPoolCellsData(){
            $.ajax({
                url: CXL.ctxPath + '/dispatch/autoTask/insertPoolCellsData',
                type: 'post',
                data: JSON.stringify(poolCellArr),
                contentType:"application/json",
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("插入成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        }

        function drawBigCrane(color,width,height,leftWidth){
            const craneRectTop = new PIXI.Graphics();
            const craneRectBottom = new PIXI.Graphics();
            const craneRectLeft = new PIXI.Graphics();
            const cranRectRight = new PIXI.Graphics();
            craneRectTop.beginFill(color);
            craneRectTop.drawRect(0, 0, width, height);
            craneRectTop.endFill();
            craneRectLeft.beginFill(color);
            craneRectLeft.drawRect(0,0,leftWidth,app.screen.height);
            craneRectLeft.beginFill();
            cranRectRight.beginFill(color);
            cranRectRight.drawRect(width - leftWidth,0,leftWidth,app.screen.height);
            cranRectRight.endFill();
            craneRectBottom.beginFill(color);
            craneRectBottom.drawRect(0,app.screen.height - height,width,height)
            craneRectBottom.endFill();
            craneContainer.addChild(craneRectTop);
            craneContainer.addChild(craneRectLeft);
            craneContainer.addChild(cranRectRight);
            craneContainer.addChild(craneRectBottom);
            app.stage.addChild(craneContainer);
        }

        function drawSmallCrane(color,width,height,name){
            const smallCrane = new PIXI.Graphics();
            smallCrane.beginFill(color);
            smallCrane.drawRect(0,0,width,height);
            smallCrane.endFill();
            const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
            craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
            craneName.y = 0 + smallCrane.height/2 - craneName.height/2;
            smallCraneContainer.addChild(smallCrane);
            smallCraneContainer.addChild(craneName);
            app.stage.addChild(smallCraneContainer);
        }




        $("#onlineStartWork").click(function () {
            let postData={"onlinePath":whichPathIsSelect};
            $.ajax({
                url: CXL.ctxPath + '/craneWork/onlineStartTask',
                type: 'get',
                data:postData,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("启动成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });


        $("#semiStopTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/stopSemiAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("停止成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });

        $("#autoStartTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/startAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("启动成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });

        $("#autoStopTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/stopAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("停止成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });


    });
</script>
</html>